#homepage {
  > .alert {
    text-align: center;
    font-size: 16px;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }
}

.intro-section {
  background-color: @navy-darker;
  font-size: 20px;
  line-height: 32px;
  padding: 60px 0;
  font-weight: 400;

  a {
    color: rgba(255, 255, 255, .5);

    &:hover {
      color: rgba(255, 255, 255, .5);
    }
  }

  .button {
    cursor: pointer;
  }

  h2 {
    font-size: 34px;
    margin: 50px 0 12px 0;
    padding-bottom: 17px;
    position: relative;

    a {
      color: #fff;

      &:hover {
        color: #fff;
      }
    }

    &:after {
      content: "";
      display: block;
      position: absolute;
      bottom: 0;
      left: 0;
      width: 91%;
      height: 1px;
      background: rgba(255, 255, 255, .2);
    }
  }

  figure {
    margin-top: 35px;
  }

  .button {
    margin: 0 5px 10px 0;
  }

  @media (max-width: 550px) {
    padding: 30px 0;

    .column:last-child {
      display: none;
    }
  }
}

.features-section {
  text-align: center;
  padding: 70px 0;

  h4 {
    margin-bottom: 25px;
    color: @blue;
  }

  img {
    width: 100%;
    height: auto;
  }

  p {
    margin: 25px 0 0;
    line-height: 25px;
  }

  .columns {
    position: relative;
    padding: 0 35px;

    + .columns:after {
      content: "";
      position: absolute;
      top: 45px;
      left: -20px;
      width: 2px;
      height: 210px;
      background-color: #f2f2f2;
    }
  }
}

.testimonials-section {
  background-color: @gray-lighter;
  border-top: 1px solid @gray;
  position: relative;
  padding: 50px 0 40px 0;

  .testimonials-photo {
    border-radius: 50% 50%;
    border: 1px solid @gray;
    overflow: hidden;
    position: absolute;
    left: 50%;
    margin-left: -32px;
    top: -32px;

    img {
      width: 64px;
      height: 64px;
      display: block;
    }
  }

  .testimonials-quote {
    text-align: center;
    margin: 0;

    p {
      font-size: 18px;
      line-height: 32px;
      color: #333a40;
      margin-bottom: 10px;

      &:before,
      &:after {
        content: "\0022";
      }
    }

    cite {
      font-style: normal;

      &:before {
        content: "\2014\00a0";
      }
    }

    .company {
      .font-source-sans-sc();
      font-size: 14px;
      color: #879199;
    }
  }
}

.get-started-section {
  background-color: #22292e;
  color: #fff;
  padding: 60px 0;

  .section-header {
    margin-bottom: 40px;
  }

  h2 {
    color: #fff;
  }

  h4 {
    color: #6ac0fc;
    margin-bottom: 8px;
  }

  a {
    color: #fff;
    text-decoration: underline;

    &:hover {
      text-decoration: none;
    }
  }

  ol {
    &:extend(.instructions-steps);

    li {
      &:extend(.instructions-steps .instructions-step-item all);
      padding: 7px 0 30px 35px;
      border-left: 2px solid #464d51;
      line-height: 24px;

      &:before {
        color: #fff;
        background-color: @gray-darker;
        font-size: 13px;
        width: 36px;
        height: 36px;
        border: 2px solid rgba(255, 255, 255, .5);
        line-height: 34px;
        left: -19px;
      }

      &:last-child, :last-child {
        margin-bottom: 0;
        padding-bottom: 0;
      }
    }
  }

  .highlight {
    margin: 10px 0 30px 0;

    &:last-child {
      margin-bottom: 0;
    }
  }

  pre {
    margin: 0;
    overflow: hidden;
  }

  code {
    background-color: #1d2328;
    color: #fff;
    padding: 18px;
    overflow: auto;

    .nv {
      color: #66bfff;
    }

    .se, .s1 {
      color: @green;
    }
  }
}

.comparison-section {
  position: relative;
  padding: 60px 0;

  .section-header {
    margin-bottom: 50px;

    h2 {
      color: @blue;
    }
  }

  h4 {
    text-align: center;
    margin-bottom: 35px;
  }

  .column {
    border: 1px solid #f7b9b9;
    padding-top: 35px;
    border-radius: 3px;

    &:last-child {
      border-color: #a2d2f5;
    }
  }

  figure {
    padding: 0 33px;
    margin-bottom: 45px;
  }

  .alert {
    .font-source-sans();
    font-size: 16px;
    color: @gray-dark;
    margin-top: 1px;
    border: 0 none;
    padding: 9px 10px 9px 20px;
    border-radius: 0;

    &:last-child {
      border-radius: 0 0 3px 3px;
    }

    &.alert-success {
      background-color: #f3f8fc;
    }

    .fa {
      font-size: 11px;
      margin-right: 4px;
    }

    .fa-close {
      color: @red;
    }

    .fa-check {
      color: @blue-light;
    }
  }
}
